<template>
  <div>
    <div class="position-relative">
      <transition name="slide"
                  :duration="{enter: 1000, leave: 1000}"
                  leave-active-class="animated rollOut"
                  enter-active-class="animated slideInDown">
        <span v-show="countControl" style="color: green;">
          <i @click="countMinus" class="fa fa-minus-circle"></i>
        </span>
      </transition>
      <span class="pl-1 pr-5" style="color: green;" @click="countPlus">
        <i class="fa fa-plus-circle plus-animation"></i>
      </span>
      <span class="position-absolute text-center" style="right: 0.25rem; top: 0">
        {{count}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountControl',
  data: function () {
    return {
      count: 0,
      countControl: false
    }
  },
  methods: {
    countPlus: function () {
      this.count++
      this.countControl = true
      let count = this.count
      // this.$emit('count-increase', count)
      this.$emit('info-increase')
      this.$nextTick(function () {
        // this.$emit('info-increase')
        this.$emit('count-increase', count)
      })
    },
    countMinus: function () {
      if (this.count > 0) {
        this.count--
      }
      if (!this.count) {
        this.countControl = false
      }
      let count = this.count
      // this.$emit('count-decrease', count)
      this.$emit('info-decrease')
      this.$nextTick(function () {
        // this.$emit('info-decrease')
        this.$emit('count-decrease', count)
      })
    }
  }
}
</script>

<style scoped>

</style>
